<template>
<div class="main">
  <mynav class="navclass"></mynav>
<!--  第一行-->
  <div style="display: flex;flex-direction: row;justify-content: flex-start">
    <rtemperature></rtemperature>
    <div style="display: flex;flex-direction: column;align-items: center">
      <myweather></myweather>
      <div style="width: 600px;height: 200px;display: flex;flex-direction: row;justify-content: flex-start">
        <div style="width:300px;height: 200px ">
          <dtemperature></dtemperature>
        </div>
        <div style="width:300px;height: 200px; ">
          <humidity></humidity>
        </div>
      </div>
    </div>
  </div>
<!--  第二行-->
  <div style="display: flex;flex-direction: row;justify-content: flex-start">
     <htinfo></htinfo>
    <div style="margin-left: 50px;width: 550px;height: 200px;display: flex;flex-direction: column;align-items: center">
     <div style="margin-top: 10px;width: 400px;height: 180px;background-color: white;flex-direction: column;align-items: center">
       <h3>控制面板</h3>
       <div style="display: flex;flex-direction: row;justify-content: flex-start">
         <div style="display:flex;flex-direction: column;align-items: center;width: 275px;">
           <div style="background-color: #e776df;border-radius: 50%;width:80px;height: 80px;display: flex;flex-direction: column;align-items: center;">
             <span style="font-size: 23px;color:white; margin-top: 25px;">空调</span>
           </div>
           <el-switch style="margin-top: 10px"  v-model="userstatus"></el-switch>
         </div>
         <div style="display:flex;flex-direction: column;align-items: center;width: 275px;">
           <div style="background-color: #ff7214;border-radius: 50%;width:80px;height: 80px;display: flex;flex-direction: column;align-items: center;">
             <span style="font-size: 23px;color:white; margin-top: 25px;">净化器</span>
           </div>
           <el-switch style="margin-top: 10px"  v-model="userstatus1"></el-switch>
         </div>
       </div>
     </div>
    </div>
  </div>
</div>
</template>

<script>
import mynav from '../components/mynav';
import rtemperature from "../components/rtemperature";
import myweather from "../components/myweather";
import dtemperature from "../components/dtemperature";
import humidity from "../components/humidity";
import htinfo from "../components/htinfo";
export default {
  name: "mycontrol",
  components:{
    mynav,
    rtemperature,
    myweather,
    dtemperature,
    humidity,
    htinfo
  },
  data() {
    return {
      userstatus:true,
      userstatus1:false
    }
  }
}
</script>

<style scoped>
.main{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background:url("../assets/contentback.png");
  height:100%;
  background-size:100% 100%;
}
.navclass{
  width: 100%;
  height: 80px;
}
</style>
